<!--
 * @Author: David Ma
 * @FilePath: \huaxia-real-estate-web\src\@layouts\components\VerticalNavLink.vue
 * @LastEditors: David Ma
 * @Description: 该文件用于...
 * @Date: 2023-11-24 22:32:10
-->
<script lang="ts" setup>
import type { NavLink } from '@layouts/types';

defineProps<{
  item: NavLink
}>()
</script>

<template>
  <li
    class="nav-link"
    :class="{ disabled: item.disable }"
  >
    <Component
      :is="item.to ? 'RouterLink' : 'a'"
      :to="item.to"
      :href="item.href"
    >
      <VIcon
        :icon="item.icon"
        class="nav-item-icon"
      />
      <!-- 👉 Title -->
      <span class="nav-item-title">
        {{ item.title }}
      </span>
       <v-badge
          v-if="item.content"
          color="primary"
          :content="item.content"
        ></v-badge>
    </Component>
  </li>
</template>

<style lang="scss">
.layout-vertical-nav {
  .nav-link a {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
</style>
